<template>
  <view>
    <view class="guess_detail" v-if="ifLogin" :style="{'background':advSet.bgcolor}">
      <div class="headerBanner">
        <image class="banner" :mode="'widthFix'" :src="banner"></image>
      </div>
      <div class="right_button">
        <div class="button_area" @click="showModal('share')">
          <image class="button_img" :mode="'scaleToFill'" :src="share_icon"></image>
        </div>
        <div class="button_area" @click="showModal('myGuess')">
          <div class="red_point" :class="{'red_point_ny':skinType==6} " v-if="has_award>0"></div>
          <image class="button_img" :mode="'scaleToFill'" :src="winner_icon"></image>
        </div>
        <div class="button_area" @click="showModal('rule')">
          <image class="button_img" :mode="'scaleToFill'" :src="rule_icon"></image>
        </div>
      <div class="button_area" @click="showModal('sort')">
        <image class="button_img" :mode="'scaleToFill'" :src="sort_icon"></image>
      </div>
      </div>
      <div class="guess_area">
        <div class="sports_detail">
          <div class="sports_header" :class="{'sports_header_ny':skinType==6}">
            <div class="dots"></div>
            <div class="timeDetail">{{ detailData.time_show }}</div>
            <div class="dots"></div>
			<div class="sports_header_bg" v-if="skinType==6">
				<img src="../../../static/sports/home_list_header.png" alt="">
			</div>
          </div>
          <div class="sports_content" :class="{'sports_content_ny':skinType==6}">
            <div class="sports_sponsor" v-if="detailData.sponsors.length != 0">
              <div class="sponsor_name" v-for="(item,index) in detailData.sponsors">
                <span>{{ item }}</span><span style="color:#000000" v-if="(index+1) != detailData.sponsors.length">＆</span>
              </div>
              赞助本场红包奖励
            </div>
            <div class="sports_title">
              <image class="title_img" :src="guafen_img" :mode="'scaleToFill'"></image>
            </div>
            <div class="sports_award">
              <div class="number_area">
                <div class="number_show"  v-for="(item,index) in detailData.jackpot_list" :class="{'noMargin': index+1 ==detailData.jackpot_list.length,'number_show_ny':skinType==6}">{{item}}</div>
                <div class="number_unit">元</div>
              </div>
            </div>
            <div class="sports_word" :class="{'sports_word_custom':guessType == 3}">
              {{ detailData.title }}
              
            </div>
			<div v-if="skinType==6 && detailData.image!='' && guessType==3" class="sport_meida">
				<img v-if="checkType(detailData.image)=='image'" :src="detailData.image" alt="">
				<video :style="{'height':videoHeight==0?null:videoHeight+'rpx'}" class="media_video" v-if="checkType(detailData.image)=='video'" :poster="detailData.image+'?vframe/png/offset/2'" :show-center-play-btn="true" :src="detailData.image" :enable-progress-gesture="false" :controls="true"> </video>
			</div>
			<div class="multi_area" v-if="guessType == 3">
			  <div class="multi_custom" :class="{'multi_custom_ny':skinType==6}">
			    <div class="option_one_puter" v-for="itemCustom in customOptions">
			      <div class="option_one tie" :class="{'win_choose':itemCustom.ret_num > 0}"  @click="betOption(itemCustom,'custom')">
			        <div class="option_pour" v-if="itemCustom.ret_num > 0">{{ itemCustom.ret_num }}注</div>
					<div class="option_one_image" v-if="skinType==6 && itemCustom.image!=''" >
						<img :src="itemCustom.image" alt="">
					</div>
			        <span :class="{'text-c':skinType==6 && itemCustom.image==''}">{{ itemCustom.name }}</span>
			      </div>
			    </div>
			  </div>
			</div>
			
            <div class="sports_team" v-if="guessType != 3">
              <div class="team_one_outer team_fight team_multi">
                <div class="team_one_position team_one_position_left">

                <div class="team_one">
                  <div class="team_icon">
                    <image class="team_icon_img" :src="newTeams[0].logo+'?imageView/1/w/200/h/200'"></image>
                  </div>
                  <div class="team_name">{{newTeams[0].name}}</div>
                </div>
                </div>
              </div>
              <div class="sports_vs">
                <div class="vs_inner">
                  <image class="vs_inner_image" src="~@/static/sports/vs_image.png"></image>
  <!--                <div class="v">V</div>
                  <div class="s">S</div>-->
                </div>
              </div>
              <div class="team_one_outer team_fight team_multi">
                <div class="team_one_position team_one_position_right">
                  <div class="team_one">
                    <div class="team_icon">
                      <image :mode="'scaleToFill'" class="team_icon_img" :src="newTeams[1].logo+'?imageView/1/w/200/h/200'"></image>
                    </div>
                    <div class="team_name">{{newTeams[1].name}}</div>
                  </div>
                </div>

              </div>
            </div>
            <div class="multi_area" v-if="guessType != 3" :class="{'multi_area_margin':guessType == 2}">
              <div class="multi_choose" :class="{'multi_border' : detailData.guess_type == 2}">
                <div class="choose_title" v-if="detailData.guess_type == 2">胜</div>

                <div class="option_one_puter" v-for="itemWin in detailData.optionData[(newTeams[0].id)]">
                  <div class="option_one win" :class="{'win_choose':itemWin.ret_num >0 }"
                      @click="betOption(itemWin)">
                    <div class="option_pour" v-if="itemWin.ret_num > 0">{{ itemWin.ret_num }}注</div>
                    {{itemWin.name}}
                  </div>
                </div>
              </div>
              <div class="multi_tie">
                <div class="option_one_puter" v-for="itemTie in detailData.optionData[0]">
                  <div class="option_one tie" :class="{'tie_choose':itemTie.ret_num > 0}"
                      @click="betOption(itemTie,'tie')">
                    <div class="option_pour" v-if="itemTie.ret_num > 0">{{ itemTie.ret_num }}注</div>
                    {{ itemTie.name }}
                  </div>
                </div>

  <!--              <div class="option_one tie">其他</div>-->
              </div>
              <div class="multi_choose" :class="{'multi_border' : detailData.guess_type == 2}">
                <div class="choose_title"  v-if="detailData.guess_type == 2">胜</div>
                <div class="option_one_puter" v-for="itemWin in detailData.optionData[(newTeams[1].id)]">
                  <div class="option_one win" :class="{'win_choose':itemWin.ret_num > 0}"
                      @click="betOption(itemWin)" >
                    <div class="option_pour" v-if="itemWin.ret_num > 0">{{ itemWin.ret_num }}注</div>
                    {{ itemWin.name }}
                  </div>
                </div>
              </div>
            </div>

            <div class="guess_remark">
              {{detailData.remark}}
            </div>
            <div class="guess_card" @click="showTaskCenter" :class="{'guess_card_ny':skinType==6}">
              <span>竞猜卡:</span>
              <image class="card_image" :src="guessCardUrl" :mode="'scaleToFill'"></image>
              <span>X{{ totalCard }}</span>
            </div>

  <!--          <div class="back_home" @click="goBack">
              查看更多赛事
            </div>-->
          </div>
        </div>
      </div>
      <div class="guess_tips" style="display: none;">
        说明：同一个选项多次投放竞猜卡，可能会获得更多的奖品哦~
      </div>
      <div class="more_button_detail" @click="goBack()">
        <image class="more_icon" :mode="'scaleToFill'" src="~@/static/sports/more_sports.png"></image>
        <span class="more_text">更多竞猜</span>
      </div>
      <div class="guess_modal" v-if="pourModal">
        <div class="pour_arae">
          <div class="pour_content" :class="{'pour_content_ny':skinType==6}">
            <div class="pour_content_header" v-if="detailData.bet_ads.length != 0">
              <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
                      :current="currentIndex">

                <swiper-item>
                  <div class="swiper_content">
                    <image class="swiper_img" :src="show_bet_ads" @click="jumpNew()"></image>

                  </div>
                </swiper-item>
              </swiper>
  <!--            <image class="content_header_img" :mode="'scaleToFill'"></image>-->
            </div>
            <div class="pour_content_team">
              <div class="pour_team_left">
                <div class="pour_team_title">赛事竞猜卡</div>
                <div class="pour_team_name" v-if="pourType != 'tie'">{{ itemChooseTeam.name }}{{ itemOption.name }}</div>
                <div class="pour_team_name" v-if="pourType == 'tie'">{{ itemOption.name }}</div>
              </div>
              <div class="pour_team_icon" v-if="pourType != 'tie' && pourType != 'custom'">
                <image class="pour_team_icon_img" :src="itemChooseTeam.logo+'?imageView/1/w/200/h/200'"></image>
              </div>
			  <div class="pour_team_icon" v-if="skinType==6 && guessType == 3 && pourType == 'custom' ">
			    <image class="pour_team_icon_img" :src="itemOption.image"></image>
				<!-- {{itemOption}} -->
			  </div>
            </div>
            <div class="pour_button" @click="confirmBet(itemOption.id,itemOption.race_id)">确认竞猜</div>
          </div>
          <div class="pour_close" @click="hideModal()">
            <image class="button_img"  :mode="'scaleToFill'" src="~@/static/sports/pour_close.png"></image>
          </div>
        </div>
      </div>
      
      <share v-if="showShare" :data="shareData" @close="showShare=false"></share>
      <guessRule :rule="sportData.activity_rules" v-if="showRuleModal" @hideRuleModal="hideModal"></guessRule>
      <taskCenter v-if="showTask" :act_type="'sports'" :show="showTask" :topImage="advSet" :list="taskMenuData" @close="handlerCloseTaskCenter" @finish="handlerTaskFinish"></taskCenter>
      <help :data="advSet" v-if="showHelpModal" @hideMissionModal="hideHelp"></help>
    </view>
    <guide></guide>
  </view>
  
</template>

<script>
import {guessSportsDetail , getSportsCard , betSports , guessSportsText, getIfHasReward, guessSportsInfo, taskList} from "@/api/api";
import {timeStampToString} from '@/until/tool'
import {LoginApp,checkLogin,checkLoginBefore,isWeiXin,isQianfan,checkPlatform,proxyShareFun,newJumpUrl} from '@/until/QFH5.js'
import {mapGetters, mapState} from 'vuex'
import guessRule from "@/components/worldGuess/guessRule";
import help from "../../../components/taskCenter/help";
export default {
  name: "guessDetail",

  computed:{
    ...mapGetters(['updateTask','skinType','guide'])
  },
  data(){
    return{
      pourModal:false,
      sportsid:0,
      actid:0,
      list_length:0,
      detailData:{},
      totalCard:0,
      choosedId:0,
      itemChooseTeam:{},
      itemOption:{},
      bet_ads:[],

      /*轮播*/
      indicatorDots: false,
      autoplay: false,
      disable: true,
      currentIndex: 0,
      pourType:'',
      taskMenuData:'',
      advSet:{},
      showTask:false,
      bet_ads_index:-1,
      show_bet_ads:'',
	  guide_link:'',
      guessType:-1,
      customOptions:[],
      banner:'',
      sportData:{},
      shareData:{},
      /*兑奖参数*/
      has_award:false,
      showShare: false,//分享
      showRuleModal: false,
      ifLogin:false,
      newTeams:[],
	  
	  showHelpModal: false,
	  guafen_img:require('@/static/sports/sports_win.png'),
	  guessCardUrl:require('@/static/sports/guess_card.png'),
	  share_icon:require('@/static/sports/share_act.png'),
	  winner_icon:require('@/static/sports/win_record.png'),
	  rule_icon:require('@/static/sports/act_rules.png'),
	  sort_icon:require('@/static/sports/sorts_icon.png'),
	  
	  videoHeight:0,//动态视频高度
    }
  },
  components:{
    guessRule,help
  },
  methods:{
	  jumpNew(){
		let url = this.guide_link
	    if('' == url || undefined == url){
	      return;
	    }else{
	      window.open(url)
	    }
	  
	  },
    getVideoHeight(){
      let url = this.detailData.image+'?vframe/png/offset/2' //获取封面高度
      uni.getImageInfo({
        src: url,
        success:(res)=>{
          //容器宽度640
          let pix = (res.width/640)
          let height = (res.height/pix).toFixed(0)
          this.videoHeight = height<100?100:height
        }
      })
    },
    checkType(val){
	       return this.$checkType(val)
	  },
    async countNum(){
      let res = await guessSportsText({actid: this.actid})
    },
    numBerFormat(number) {
      let numberText = number + ''
      return numberText.split("")
    },
    getMineCard(){
      let data = {
        actid:this.actid
      }
      getSportsCard(data,'sports','sports').then(res=>{
        //console.info(res)
        this.totalCard = res.data.num
      })
    },
    /*活动详情*/
    async getBasicData(){

      let res = await guessSportsInfo({actid: this.actid})
	  this.advSet = res.data.settings
      this.banner = res.data.settings.banner
      this.sportData = res.data
      this.shareData = res.data
      uni.setStorageSync('actid', this.actid)
      uni.setStorageSync('platform',JSON.stringify(res.data.settings.platform))
      //console.info("这这这这这这这这这这这这这")
      //console.info(checkLoginBefore())
      if(await checkLoginBefore()){
        this.getRaceDetail()
        this.getMineCard()
        this.getIfHasPlay()
        this.ifLogin = true
      }

      //console.log('123456',this.newTeams)
	  
	  uni.setStorageSync('platform',JSON.stringify(res.data.settings.platform))
	  let loactionUrl = window.location.href
	  let data = res.data
	  proxyShareFun(data.settings.title,data.settings.image,data.settings.desc,loactionUrl)

      /*let callback = () => {
        //console.info(this.sportsid)

      }
      await this.getAuth(callback, null, true)*/
    },
    getIfHasPlay(){
      getIfHasReward({actid: this.actid}).then(res=>{
        //console.info(res)
        this.has_award = res.data.has_award
      })
    },
    /*赛事详情*/
    getRaceDetail(){

      let data = {
        actid:this.actid,
        race_id:this.sportsid
      }
      guessSportsDetail(data).then(res=>{
        //console.info(res)
        this.detailData = res.data.race
        this.$setTitle(res.data.race.title)
        this.guessType = res.data.race.guess_type
        //console.info(this.guessType)
        this.bet_ads = res.data.race.bet_ads
        if('' == this.bet_ads){
          this.show_bet_ads = ''
		  this.guide_link = ''
        }else{
          if(1 < this.bet_ads.length){
            this.bet_ads_index = (Math.floor(Math.random() * (this.bet_ads.length - 0) ) + 0)
            this.show_bet_ads = this.bet_ads[this.bet_ads_index].image
			this.guide_link = this.bet_ads[this.bet_ads_index].link
          }
          else if(1 == this.bet_ads.length){
            this.show_bet_ads = this.bet_ads[0].image
			this.guide_link = this.bet_ads[0].link
          }
        }

        /*金额*/
        let newList = this.numBerFormat(this.detailData.jackpot)
        this.detailData.jackpot_list = newList

        /*时间*/
        let set = {
          showHour: true,
          showMin: true,
          showSec: false,
          showWeek: false
        }
        this.detailData.time_show ='截止 ' + timeStampToString(this.detailData.guess_stop, set)
        /*选项data*/
        let data = {}
        let optionDemo = res.data.options
        let teamSort = []
        teamSort.push(this.detailData.team_a)
        teamSort.push(this.detailData.team_b)
        this.newTeams = []
        teamSort.forEach(item=>{
          this.detailData.teams.forEach(itemTeam=>{
            if(item == itemTeam.id){
              this.newTeams.push(itemTeam)
            }
          })
        })
        if(this.guessType != 3){
          this.newTeams.forEach(item=>{
            let teamId = item.id
            let optionList = []
            optionDemo.forEach(itemOp=>{
              if(itemOp.team_id == teamId){
                optionList.push(itemOp)
              }
            })
            //console.info(optionList)
            data[teamId] = optionList
          })
          /*optionDemo.forEach(itemOp=>{
            let optionList = []
            if(itemOp.team_id == 0){
              optionList.push(itemOp)
            }
            //console.info(optionList)
          })*/
          data[0] = optionDemo.filter(item => item.team_id===0 )
          this.detailData.optionData = data
        }else{
          this.customOptions = optionDemo
        }
        /*if(0 != optionDemo.length){
          if(optionDemo[0].team_id == 0){

          }
        }*/
		//获取视频高度
		if(this.skinType==6){
			this.getVideoHeight()
		}


      })
    },
    async showTaskCenter(){
      let resTask = await guessSportsText({actid: this.actid})
      //console.info(resTask)
      if(resTask.data.has_task){
        taskList({actid:this.actid}).then(res=>{
          this.taskMenuData = res.data
        })
        // let res = await guessSportsInfo({actid: this.actid})
        // this.advSet = res.data.settings
        this.showTask = true
      }else{
        uni.showToast({ title:'今天的竞猜卡已用完，明天再来试试吧！', icon:'none' })
      }

    },
    initTask(){
      taskList({actid:this.actid}).then(res=>{
        this.taskMenuData = res.data
      })
    },
    /*投注流程*/
    betOption(item,type){
      this.goPour(item,type)
    },
    async goPour(item,type){
      if(this.totalCard <= 0){
        let res = await guessSportsText({actid: this.actid})
        //console.info(res)
        if(res.data.has_task){
          uni.showToast({ title:'竞猜卡不足，快去做任务~', icon:'none' })
          taskList({actid:this.actid}).then(res=>{
            this.taskMenuData = res.data
          })
          // let res = await guessSportsInfo({actid: this.actid})
          // this.advSet = res.data.settings
          this.showTask = true

        }else{
          uni.showToast({ title:'今天的竞猜卡已用完，明天再来试试吧！', icon:'none' })
        }
      }else{
        this.itemOption = item
		console.log(item)
        if(type != 'tie' && type != 'custom'){
          this.pourType = type
          let teamId = item.team_id
          //console.info(this.detailData)
          //console.info(teamId)
          //console.log("颠倒",this.newTeams.filter(item =>item.id == teamId))
          this.itemChooseTeam = this.newTeams.filter(item =>item.id == teamId)[0]
        }else{
          this.pourType = type
        }
        this.pourModal = true
      }

    },
    async confirmBet(optionId,raceId){
        let data ={
          race_id:raceId,
          option_id:optionId,
          actid:this.actid
        }
        betSports(data).then(res=>{
          //console.info(res)
          if(0 == res.code){
            uni.showToast({ title:'竞猜成功', icon:'none' })

            this.getRaceDetail()
            this.getMineCard()
            this.hideModal()
          }else{
			  let str = ''
			  if(res.code==10010){
			  	str='您不是受邀用户'
			  }else if(res.code==10011){
			  	str='您所在地区不能参与该活动'
			  }else{
			  	str=res.text
			  }
            uni.showToast({ title:str, icon:'none' })
          }
        })

    },
    showModal(type) {
      //console.info(type)
      switch (type) {
        case 'share':
          this.showShare = true
          break
        case 'rule':
          this.showRuleModal = true
          break;
        case 'myGuess':
          uni.navigateTo({
            url: "/plugin/pages/sports/myGuess?id="+this.actid,
          });
          break;
        case 'mission':
          this.showTask = true
          break;
		case 'sort':
		  this.$navigateTo({url:'/plugin/pages/sports/sorts?id='+this.actid})
      }
    },
    hideModal(){
      this.pourModal = false
      this.showRuleModal = false
    },
    handlerCloseTaskCenter(val){
      this.showTask = val
    },
    handlerTaskFinish(){
      taskList({actid:this.actid}).then(res=>{
        this.taskMenuData = res.data
      })
      this.getRaceDetail()
      this.getMineCard()
    },
    goBack(){
      var pages = getCurrentPages();
      //console.info(pages)
      // if(1 == pages.length){
      //   uni.navigateTo(
      //       {
      //         url: "/plugin/pages/index?type=guess&plugin=sports&id="+this.actid,
      //       }
      //   )
      // }else{
      //   uni.navigateBack()
      // }
	  uni.navigateTo(  {  url: "/plugin/pages/index?type=guess&plugin=sports&id="+this.actid } )

    },
	hideHelp() {
	  this.showHelpModal = false
	},

  },
  mounted() {
	if(this.skinType==6){
		this.guafen_img=require('@/static/sports/sports_win_ny.png')
		this.guessCardUrl = require('@/static/sports/guess_card_ny.png')
		this.share_icon=require('@/static/sports/share_act_ny.png')
		this.winner_icon=require('@/static/sports/win_record_ny.png')
		this.rule_icon=require('@/static/sports/act_rules_ny.png')
		this.sort_icon=require('@/static/sports/sorts_icon_ny.png')
	}
    this.countNum()
  },
  onLoad(op) {
    this.sportsid = op.race_id
    this.actid = op.id
	uni.setStorageSync('actid', op.id)
    this.list_length = op.listLength
    //console.log('----------------------')
    this.$store.commit('SETACTIVITYNAME','sports')
    //console.info(this.actid)
    this.getBasicData()
	//任务模块
	if(op.invite){
		uni.setStorageSync(this.actid+'Invite', op.invite)
		uni.setStorageSync(this.actid+'Tid', op.tid)
		this.showHelpModal = true
	}else{
		uni.setStorageSync(this.actid+'Invite', 0)
		uni.setStorageSync(this.actid+'Tid', 0)
	}

  },
  //做任務更新；其他状态忽略-start
  // watch: {
  	// updateTask: {
  	// 	handler(newVal, oldVal) {
  	// 		if (newVal==true) {
			// 	this.actid = uni.getStorageSync('actid')
  	// 			this.initTask()
  	// 		}
  	// 	},
  	// 	deep: true,
  	// 	immediate:true
  	// },
  // },
  //做任務更新；其他状态忽略-end
}
</script>

<style scoped lang="scss">
@import 'src/plugin/pages/allPlugin/worldGuess';
@import '~@/common/common.scss';
@import "~@/font/stylesheet.css";
.right_button {
  position: fixed;
  top: 49rpx;
  right: 30rpx;
  z-index: 9;

  .button_area {
    width: 90rpx;
    height: 90rpx;
    position: relative;
    .red_point{
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 4rpx;
      right: 10rpx;
    }
	.red_point_ny{
			  width: 8rpx;
			  height: 8rpx;
			  background: #F92F2F;
			  top: 50rpx;
			  right: 8rpx;
			  border: 2rpx solid #FFFFFF;
			  z-index: 9;
	}
    .button_img {
      width: 100%;
      height: 100%;
    }
  }
}
.guess_detail{
  width: 100%;
  min-height: 100vh;
  background: #1ACDFD;
  position: relative;
  padding: 0 0 80rpx 0;
  .guess_area{
    margin: 0 30rpx;
    .multi_area{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 5rpx 0 20rpx 0;
      .multi_choose{
        border-radius: 15rpx;
        opacity: 1;

        padding: 20rpx;
      }
      .multi_border{
        border: 1rpx solid #DCDCDC;
      }
      .multi_tie{
        padding: 20rpx;
      }
      .multi_custom{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        text-align: center;
        margin: 0 auto;
        .option_one_puter{
          margin: 3px 10px;
          .option_one{
            background: #F5F5F5;
            color: rgba(51, 51, 51, 1);
            min-width: 280rpx;
            width: auto;
            min-height: 68rpx;
            height: auto;
            line-height: 68rpx;
            font-size: 26rpx;
            border: none;
          }
        }
      }
	  .multi_custom_ny{
		  margin-top: 38rpx;
		  .option_one_puter{
			  margin:0 0 30rpx 0!important;
		  }
		  .option_one{
			  width: 540rpx!important;
			  height: 100rpx!important;
			  line-height: 100rpx!important;
			  border-radius: 50rpx!important;
			  background: #fff!important;
			  line-height: 100rpx!important;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  margin: 0!important;
			  &>span{
				  display: block;
				  min-width: 100rpx;
				  text-align: left;
				  font-size: 30rpx;
				  font-family: PingFang SC-Regular, PingFang SC;
				  font-weight: 400;
				  color: #333333;
			  }
			  .text-c{
				  text-align: center!important;
			  }
		  }
		  .option_one_image{
			  width: 80rpx;
			  height: 80rpx;
			  margin:0  28rpx 0 0;
			  img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 6rpx;
				border: 2rpx solid #ffffff;
			  }
			  
		  }
		  .win_choose{
			   background: #FF332E !important;
			  span{
				   color: #fff!important;
			  }
		  }
	  }
      .option_one{
        width: 160rpx;
        height: 64rpx;
        line-height: 64rpx;
        border-radius: 35rpx;
        margin: 10rpx 0 0 0;
        position: relative;
        .option_pour{
          position: absolute;
          min-width: 44rpx;
          height: 44rpx;
          padding: 0 1px;
          top: -16rpx;
          right: -20rpx;
          background: #ECA705;
          border-radius: 50%;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.2);
          opacity: 1;
          line-height: 44rpx;
          font-size: 20rpx;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      .win_choose{
        background: #FF3E3E !important;
        color: #ffffff !important;
      }
      .tie{
        background: #FFFFFF;
        color: rgba(39, 118, 249, 1);
        border: 1px solid #2776F9;

      }
      .tie_choose{
        background: rgba(39, 118, 249, 1);
        color: #FFFFFF;
        border: 1px solid #2776F9;

      }
      .win{
        background: #FFFFFF;
        color: rgba(255, 62, 62, 1);
        border: 1px solid #FF3E3E;
      }
      .guess_options{
        display: flex;
        margin: 30rpx 80rpx;
        align-items: center;
        justify-content: center;

      }
      .choose_title{
        width: 160rpx;
        height: 64rpx;
        line-height: 64rpx;
        color: rgba(255, 62, 62, 1);
      }
    }
    .multi_area_margin{
      margin: 40rpx 0;
    }
  }
  .guess_remark{
    padding: 30rpx 0rpx;
    margin: 0 auto;
    text-align: center;
    color: #5a5a5a;
    font-size: 28rpx;
  }
  .guess_card{
    padding: 30rpx 0rpx;
    margin: 0 20rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    .card_image{
      width: 200rpx;
      height: 86rpx;
      margin: 0 10rpx 0 0;
    }
    span{
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      margin: 0 10rpx 0 0;
    }
  }
  .guess_card_ny{
	  border-top:1rpx dashed #E3CDAB !important;
  }
  .guess_tips{
    padding: 30rpx 0 0rpx 0;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
  .guess_modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
	z-index: 10;
    .pour_arae{
      width: 640rpx;
      @include center;
      top: 45%;
      .pour_header{
        width: 100%;
        height: 260rpx;
        margin: -5rpx 0 0 0;
        .pour_header_img{
          width: 100%;
          height: 100%;
        }
      }
	  .pour_header_ny{
		  height: 190rpx;
	  }
      .pour_content{
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.2);
        border-radius: 30rpx;
        overflow: hidden;
        .pour_content_header{
          margin: 30rpx 0;
          border-radius: 20rpx;
          height: 200rpx;
          .swiper {
            width: 100%;
            height: 100%;
            .swiper_content {
              width: 100%;
              height: 100%;
              overflow: hidden;
              box-sizing: border-box;
              padding: 0 20rpx;
              .swiper_img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
            }
          }
        }
        .pour_content_team{
          margin: 40rpx 30rpx 0 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .pour_team_left{
            display: flex;
            flex-direction: column;
            justify-content: left;
            .pour_team_title{
              font-family: YouSheBiaoTiHei;
              height: 52rpx;
              line-height: 52rpx;
              font-size: 74rpx;
              color: rgba(51, 51, 51, 1);
              letter-spacing: 3rpx;
            }
            .pour_team_name{
              margin: 10rpx 0 0 0;
              font-size: 36rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #2776F9;
            }
          }
          .pour_team_icon{
            min-width: 120rpx;
            height: 120rpx;
            flex-shrink:0;
            .pour_team_icon_img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
              border: 5rpx solid rgba(39, 118, 249, 1);
            }
          }
        }
        .pour_button{
          width: 400rpx;
          height: 80rpx;
          line-height: 80rpx;
          margin: 30rpx auto 60rpx auto;
          background: rgba(255, 61, 81, 1);
          border-radius: 40rpx;
          text-align: center;
          font-size: 34rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
	  .pour_content_ny{
		  background: #FFF7EC!important;
		  margin-top: -20rpx;
		  position: relative;
		  z-index: 9;
		  .pour_team_title{
			// font-family: "楷体","楷体_GB2312"!important;
			// font-family:"楷体","楷体_GB2312"!important;
			// font-family: 'Courier New', Courier, monospace!important;
			// color: #FF332E!important;
			// font-size: 50rpx!important;
			font-size: 0rpx!important;
			background-image: url("../../../static/sports/font_kaiti.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 170rpx;
			height: 50rpx;
		  }
		  .pour_team_name{
			  margin-top: 20rpx!important;
			  color: #222222!important;
		  }
		  .pour_content_team{
			  margin: 40rpx 22rpx 0 26rpx!important;
		  }
		  .pour_team_icon{
			  width: 100rpx!important;
			  min-width: 100rpx!important;
			  height: 100rpx!important;
			  border-radius: 8rpx!important;
			  border: none!important;
			  .pour_team_icon_img{
				  border-radius: 8rpx!important;
				  border: none!important;
			  }
		  }
	  }
      .pour_close{
        margin: 40rpx auto;
        width: 70rpx;
        height: 70rpx;
        .button_img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .back_home{
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 10rpx;
    background: rgba(26,205,253,.7);
    color: #FFFFFF;
    text-align: center;
    border-radius: 20rpx;
    margin: 0 auto 20rpx auto;
    font-size: 15px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
  }
  .more_button_detail {
    width: 300rpx;
    margin: 30rpx auto 0rpx auto;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 62, 62, 0.2);
    border-radius: 300rpx;

    .more_icon {
      width: 70rpx;
      height: 65rpx;
      margin: 0 15rpx 0 0;
    }

    .more_text {
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
}
</style>